<!--新人专享 -->
<template>
	<scroll-view class="scroll-box" scroll-y @scrolltolower="getData" lower-threshold="60"
		v-if="goodsList && goodsList.length && couponList && couponList.length">
		<view class="">
			<view class="top-container">
				<view class="goods-list-box">
					<view class="e-flex e-m-b-36">
						<image class="img-36 e-m-r-14" src="./static/star.png" mode="aspectFit"></image>
						<text class=" fw-600 c-333 e-font-30">{{$t('layout.新人专享')}}</text>
					</view>
					<view class="e-flex goods-flex-box" :class="{'justify-between': goodsList.length > 2}">
						<view class="goods-item bg-white e-m-b-20 e-rela"
							:class="{'e-m-r-20': goodsList.length < 3}" v-for="item in goodsList"
							:key="item.id" @tap="$goTo('/pages/classify/goods/info/index',  {
								id: item.id
							})">
							<image v-if="appLocale === 'en_US'" class="en-image" src="./static/buy-en.png"
								mode="aspectFill"></image>
							<image v-if="appLocale === 'zh_CN'" class="en-image" src="./static/buy-zh.png"
								mode="aspectFill"></image>
							<load-image mode="aspectFit" :size="['200rpx']" :src="item.coverImg">
							</load-image>
							
							<view class="e-font-22 c-primary e-line-1 name-box">
								{{item.name}}
							</view>
							<view class=" e-p-b-10 e-p-l-30 e-p-r-26">
								<text class="c-red e-font-20">{{$unitEn}}</text>
								<text class="c-red e-font-36">{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="e-p-20">
				<view class="coupon-container e-p-t-20">
					<view class="e-flex e-p-l-34 e-p-r-36 e-m-b-30">
						<view class="e-flex e-e-flex-1">
							<image class="img-36 e-m-r-14" src="./static/coupon.png" mode="aspectFit"></image>
							<view class="e-font-30 fw-600" style="">
								{{$t('layout.新人专享券')}}
							</view>
						</view>
						<view class="e-flex">
							<view class="e-font-24 btn-box">
								{{$t('user.立即使用')}}
							</view>
						</view>
					</view>
					<view class="e-p-l-40 e-p-b-30">
						<scroll-view scroll-x>
							<view class="e-flex">
								<view class="bg-white e-rela e-flex e-m-r-20 coupon-list-box"
									v-for="item in couponList" :key="item.id"
									@tap="handleChangeCoupon(item.couponCode)">
									<view class="e-flex">
										<view class="e-p-t-20 e-p-b-20 e-p-l-22 e-p-r-24">
											<view class="" v-if="item.type === 1">
												<text class="e-font-24 c-red">{{$unitEn}}</text>
												<text class="e-font-50 c-red">{{item.amount}}</text>
											</view>
											<view class="" v-else>
												<text class="e-font-50 c-red">{{item.discountScale}}</text>
												<text class="e-font-24 c-red">{{$t('public.折')}}</text>
											</view>
											<view class="c-98 e-font-20">
												{{$t('user.优惠券')}}
											</view>
										</view>
										<view class="e-flex-1">
											<view class="c-333 e-font-26 fw-600">
												{{item.name}}
											</view>
											<view class="c-98 e-font-20">
												{{getEndTime(item.endTime||'')}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="e-p-l-20 e-p-r-20">
				<view class="bg-white product-box e-flex e-p-l-20 e-p-r-20 e-p-t-40 e-p-b-40 e-m-b-20"
					v-for="item in productList" :key="item.id" @tap="$goTo('/pages/classify/goods/info/index',  {
								id: item.id
							})">
					<load-image mode="aspectFit" :size="['200rpx']" :src="item.coverImg">
					</load-image>
					<view class="e-p-l-26 e-flex-1">
						<view class="fw-500 e-font-30 c-333 e-line-2 e-m-b-22">
							{{item.name}}
						</view>
						<view class="product-price-box e-flex e-p-10">
							<view class="e-flex-1 e-flex e-flex-xy-center e-flex-column">
								<view class="">
									<text class="e-font-20 c-yellow">{{$unitEn}}</text>
									<text class="e-font-36 c-yellow">{{item.price}}</text>
								</view>
								<view class="e-font-20 c-yellow">
									{{$t('layout.新人价')}}
								</view>
							</view>
							<view class="e-flex-1 e-flex e-flex-xy-center e-flex-column">
								<view class="e-flex">
									<text class="e-font-28 c-yellow-deep fw-600">{{$t('layout.抢购')}}</text>
									<image class="img-20" src="./static/yellow-arrow.png" mode="aspectFit"></image>
								</view>
								<view class="e-font-20 c-yellow-shallow">
									{{$t('layout.剩余')}}
									{{item.stock}}
									{{$t('layout.份')}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<load-more :showLoad="showLoad"></load-more>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import {
		getCouponAndProductBySubareaId,
		getProductByCouponId
	} from '@/common/request/api'
	import type { CouponsItem, GoodsItem } from '@/common/request/api'
	import { useQueryPage } from '@/common/hooks'

	const props = defineProps({
		pageTitle: String
	})

	const appLocale = uni.getStorageSync('appLocale') || 'zh_CN'

	const goodsList = ref<GoodsItem[]>([])
	const couponList = ref<CouponsItem[]>([])

	const couponCode = ref('')
	const handleRequest = async (params : Parameters<typeof getProductByCouponId>[1]) => {
		return await getProductByCouponId(couponCode.value, params)
	}

	const {
		showLoad,
		isEmpty,
		list: productList,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: handleRequest
	})

	const getEndTime = (val : string) => val.split(' ')[0]

	const getData = () => {
		handleQueryPage()
	}

	const handleChangeCoupon = (code : string) => {
		couponCode.value = code
		handleRefresh()
	}

	if (props.pageTitle) {
		getCouponAndProductBySubareaId({
			subareaId: props.pageTitle
		}).then(res => {
			goodsList.value = res.data.product.rows || []
			couponList.value = res.data.coupons
			if (couponList.value && couponList.value.length) {
				couponCode.value = couponList.value[0].couponCode
				handleRefresh()
			}

		})
	}
</script>

<style lang="scss" scoped>
	.top-container {
		width: 100vw;
		height: 1210rpx;
		background-image: url('static/newcomer-bg.png');
		background-repeat: no-repeat;
		background-size: 100vw 560rpx;
		padding-top: 368rpx;
		padding-left: 20px;
		padding-right: 20px;
	}

	.goods-list-box {
		background: linear-gradient(180deg, #FFF5E2 0%, #FDC869 100%);
		border-radius: 16rpx;
		padding: 20rpx;
		min-height: 800rpx;
	}

	.justify-between {
		justify-content: space-between
	}

	.goods-flex-box {
		flex-wrap: wrap;

		.goods-item {
			flex: 0 0 205rpx;
			border-radius: 2px;
		}
	}

	.img-200 {
		width: 200rpx;
		height: 200rpx;
	}

	.name-box {
		width: 200rpx;
		padding: 12rpx 26rpx;
	}

	.scroll-box {
		height: 100vh;
		background: #FDE5D0;
	}

	.en-image {
		width: 47rpx;
		height: 37rpx;
		top: 0;
	}

	.btn-box {
		padding: 8rpx 18rpx 6rpx 20rpx;
		border-radius: 24rpx;
	}

	.coupon-list-box {
		flex: 0 0 40%;
	}

	.coupon-container {
		background: linear-gradient(180deg, #FFF5E2 0%, #FDC869 100%);
		border-radius: 16rpx;
	}

	.product-box {
		border-radius: 8rpx;
	}

	.product-price-box {
		background-image: url('./static/product-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.c-yellow {
		color: #E7C9A1;
	}

	.e-flex-column {
		flex-direction: column;
	}

	.c-yellow-deep {
		color: #D34C00;
	}

	.c-yellow-shallow {
		color: #D54B00;
	}
</style>